<template>
  <div v-if="GLOBAL.sysUserVisible=='1'">
    <el-container>
      <el-main>
        <el-header height='50px' style="text-align:left;line-height: 10px;">
          <span>学校概况 >></span>
          <span style="color: #20a0ff"> &nbsp&nbsp{{this.universityName}}&nbsp&nbsp&nbsp&nbsp</span>
        </el-header>
        <el-main style="line-height: 80px">
          <el-card class="box-card" style="margin-left: 35%" @click.native="showmore">
            <div style="margin-left:1px;font-size: 22px;height: 40px; margin-top: 20px">预警人数</div>
            <div style="margin-left:1px;font-size: 18px;height: 40px; ">{{basicData["seriousNum"] }}人</div>
          </el-card>
        </el-main>
        <el-card >
          <div id="line1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main4" style="float:left;width:100%;height: 300px"></div>
          </div>
        </el-card>
        <el-header height="40px"></el-header>
        <el-card >
          <div id="bar1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
          </div>
        </el-card>
        <el-header height="40px"></el-header>
        <el-card style="height: 500px">
          <div class="radar">
            <div style="line-height: 50px">&nbsp</div>
            <div id="radar1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main2" style="margin-left:60px;float:left;width:400px;height: 300px"></div>
              <div id="main3" style="margin-right:60px;float:right;width:400px;height: 300px"></div>
            </div>
          </div>
        </el-card>
        <el-header height="40px"></el-header>
        <el-card style="height: 100%">
        <el-table
          stripe
          :row-style="{height:'45px'}"
          :cell-style="{padding:'0px'}"
          style="font-size: 14px;width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#606266',height:'45px'}"
          :data= stuTable >
          <el-table-column
            prop="index"
            align="center"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="stname"
            label="姓名"
            width="80"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="stid"
            label="学号"
            width="120"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gender"
            label="性别"
            width="60"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="age"
            label="年龄"
            width="80"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="department"
            label="学校"
            width="120"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="college"
            label="专业"
            width="100"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="province"
            label="地址"
            width="100"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="level"
            label="抑郁程度"
            width="100"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="stype"
            label="学历"
            width="80"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column
            align="center"
            prop="year"
            label="入学年份"
            width="90"
            :show-overflow-tooltip='true' >
          </el-table-column>
          <el-table-column  align="center" label="设置">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showInfo( scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      </el-main>
    </el-container>
  </div>

</template>

<script>
    export default {
        name: "problemStudents",
        data() {
            return {
                queryInfo:{
                    universityName:"",
                    illness:""
                },
                stuData:{},//问题学生学院分布柱状图
                radar:{},//心理指标雷达图
                sexRatio:[],//性别圆环图数据
                universityName:"",
                barX:{data:[]},//柱状图x轴
                barSeries:[{name: '数量', type: 'bar', barWidth : 75,data:[]}],//柱状图数据
                stuTable:[],
                basicData:{},
                trendData2:[],
                dateTime:[]
            }
        },
        created() {
            this.getDate()
            this.initData();
        },
        watch:{
            stuTable() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initBarEcharts();
                })
            },
            trendData2() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initLineEcharts();
                })
            },
            radar() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initRadarEcharts();
                })
            },
            sexRatio() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initCircleEcharts();
                })
            },
        },

        methods:{
            showmore(){
                this.$router.push({path:"/home/seriousStu"});
            },
            getDate(){
                var dataArr = [];
                var data = new Date();
                var year = data.getFullYear();
                data.setMonth(data.getMonth()+1, 1)           //获取到当前月份,设置月份
                for (var i = 0; i < 6; i++) {
                    data.setMonth(data.getMonth() - 1);     //每次循环一次 月份值减1
                    var m = data.getMonth() + 1;
                    m = m < 10 ? "0" + m : m;
                    dataArr.push(data.getFullYear() + "-" + (m));
                }
                this.dateTime=dataArr.reverse()
                console.log("时间:"+dataArr)
            },
            showInfo(row){
                this.$router.push({path:"/home/stuInfoCheck",query:{info:row}});
            },
            initData(){
                //预警人数为重度抑郁人数，评测预警趋势图为重度抑郁患者最近6个月的人数
                //问题学生学院分布是不同学院的抑郁学生（不是无抑郁倾向的）
                //雷达图是之前的接口，性别比例是除去无抑郁倾向的学生的男女比例
                //表格图为student_result表除去无抑郁倾向的学生
                //替换为其他接口
                // this.basicData = {"personNum":120,"evaNum":400,"seriousNum":8}
                // this.trendData2=[2,3,1,5,1,2]
                this.$axios.post("managementSystem/report/evaluation",{"sType":"","collegeId":""})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                //后面替换为其他接口
                                // this.basicData = {"personNum": 120, "evaNum": 400, "seriousNum": 8}
                                this.basicData={"personNum":data.data.personNum , "evaNum": data.data.evaNum, "seriousNum": data.data.seriousNum}
                                this.basicData["evaAvg"] = (this.basicData["evaNum"] / this.basicData["personNum"]).toFixed(0) + "次/人"
                                this.basicData["personNum"] = this.basicData["personNum"] + "人"
                                this.basicData["evaNum"] = this.basicData["evaNum"] + "人次"
                                this.basicData["seriousNum"] = this.basicData["seriousNum"]

                                // this.trendData = [20, 30, 10, 5, 15, 20]
                                this.trendData2=data.data.trendDate2
                            }
                        }
                    })


                this.$axios.post("managementSystem/student/stuInfo",this.queryInfo)
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            var temp=data.data
                            this.stuTable=[]
                            for (var i in temp) {
                                if(temp[i]["level"]!="无抑郁倾向"){
                                    this.stuTable.push(temp[i])
                                }
                            }
                            var g1=0,g2=0
                            for (var i in this.stuTable) {
                                this.stuTable[i]["index"] = parseInt(i) + 1;
                                if(this.stuTable[i]["stype"]==2){
                                    this.stuTable[i]["stype"] = '博士'
                                }else if(this.stuTable[i]["stype"] ==1){
                                    this.stuTable[i]["stype"] = '硕士'
                                }else if(this.stuTable[i]["stype"] ==0){
                                    this.stuTable[i]["stype"] = '本科'
                                }else if(this.stuTable[i]["stype"] ==3){
                                    this.stuTable[i]["stype"] = '初中'
                                }else if(this.stuTable[i]["stype"] ==4){
                                    this.stuTable[i]["stype"] = '高中'
                                }else if(this.stuTable[i]["stype"] ==5){
                                    this.stuTable[i]["stype"] = '大专'
                                }
                                if(this.stuData.hasOwnProperty(this.stuTable[i]["college"])){
                                    this.stuData[this.stuTable[i]["college"]]+=1
                                }else{
                                    this.stuData[this.stuTable[i]["college"]]=1
                                }
                                if(this.stuTable[i]["gender"]=="男"){
                                    g1+=1
                                }else{
                                    g2+=1
                                }
                            }
                            //环形图数据初始化
                            this.sexRatio = [g1,g2]
                            console.log("sexRatio",this.sexRatio)

                            console.log(this.stuData)
                            for(var key in this.stuData){
                                this.barX.data.push(key)
                                this.barSeries[0]["data"].push(this.stuData[key])
                            }
                        }
                    })

                var allData
                this.$axios.post("managementSystem/operation/schoolReport")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                            // this.$message(fgf{
                            //   message:'服务错误',
                            //   type:'warn'
                            // });
                        } else {
                            if (data.data.errorCode == '200') {
                                allData = data.data
                                console.log(allData.errorMsg)

                                //雷达图数据初始化
                                this.radar = {"19": [], "20": [], "21": []}
                                var radarName = ["19", "20", "21"]
                                var l=allData.radar
                                // var l = [{"depress": 30, "anxiety": 20, "suicide": 30, "insomnia": 20, "others": 20},
                                //     {"depress": 20, "anxiety": 15, "suicide": 20, "insomnia": 40, "others": 20},
                                //     {"depress": 30, "anxiety": 10, "suicide": 30, "insomnia": 10, "others": 30}
                                // ]
                                for (var i = 0; i < l.length; i++) {
                                    this.radar[radarName[i]].push(l[i]["depress"])
                                    this.radar[radarName[i]].push(l[i]["anxiety"])
                                    this.radar[radarName[i]].push(l[i]["suicide"])
                                    this.radar[radarName[i]].push(l[i]["insomnia"])
                                    this.radar[radarName[i]].push(l[i]["others"])
                                }
                                console.log("radar:", this.radar)

                            }
                        }
                    })
            },
            initBarEcharts(){
                // 实例化echarts对象
                console.log(document.getElementById('main1'))
                let myChartDrawer = this.$echarts.init(document.getElementById('main1'))

                // 绘制条形图
                var option = {
                    title: {
                        text: '问题学生学院分布',
                        x:'center',//x轴方向对齐方式
                    },
                    legend: {
                        data: ['数量'],
                        top: 5,
                        x:'right',//x轴方向对齐方式
                        padding:[30,70,0,0]
                    },
                    //X轴
                    xAxis: this.barX,
                    // Y轴
                    yAxis: {},
                    // 数据
                    series:this.barSeries
                };

                myChartDrawer.setOption(option);
            },
            initRadarEcharts(){
                let myChartDrawer = this.$echarts.init(document.getElementById('main2'))
                let option = {
                    title: {
                        text: '评测结果心理指标雷达图',
                        x:'center',//x轴方向对齐方式
                        padding:[20,70,0,0]
                    },
                    tooltip: {},
                    legend: {
                        left:"center",
                        top:"bottom",
                        orient:"horizontal",
                        padding:[0,0,0,0],
                        data: ['19', '20','21']
                    },
                    radar: {
                        // shape: 'circle',
                        center: ['50%', '60%'],//调位置
                        radius: 90,//调大小
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(131,141,158,.1)',
                            },
                        },
                        indicator: [{
                            name: '抑郁',
                            max:10
                        },
                            {
                                name: '焦虑',
                                max:10
                            },
                            {
                                name: '自杀',
                                max:10
                            },
                            {
                                name: '失眠',
                                max:10
                            },
                            {
                                name: '其他',
                                max:10
                            },
                        ],
                        splitArea: {
                            show: false,
                            areaStyle: {
                                color: 'rgba(255,0,0,0)', // 图表背景的颜色
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: 'rgba(131,141,158,.1)', // 设置网格的颜色
                            },
                        },
                    },
                    series: [{
                        name: '雷达图',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [{
                            value: this.radar["19"],
                            name: '19',
                            itemStyle: {
                                normal: {
                                    color: '#5B8FF9',
                                    lineStyle: {
                                        color: '#5AD8A6',
                                    },
                                },
                            },
                        },
                            {
                                value: this.radar["20"],
                                name: '20',
                                itemStyle: {
                                    normal: {
                                        color: '#5AD8A6',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            },
                            {
                                value: this.radar["21"],
                                name: '21',
                                itemStyle: {
                                    normal: {
                                        color: '#BA55D3',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            }
                        ]
                    }]
                };
                myChartDrawer.setOption(option);
            },
            initCircleEcharts(){
                // 基于准备好的dom，初始化echarts实例
                this.chartPie = this.$echarts.init(document.getElementById('main3'),'macarons');
                this.chartPie.setOption({
                    title: {
                        text: '性别比例',
                        x: 'center',
                        padding:[20,70,0,0]
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                    },
                    legend: {
                        data: ['男', '女',],
                        left:"center",
                        top:"bottom",
                        orient:"horizontal",
                        padding:[0,0,0,0]
                    },
                    series: [
                        {
                            name: '性别比例',
                            type: 'pie',
                            radius: ['50%', '60%'],
                            center: ['50%', '60%'],
                            color:['#20a0ff','#5AD8A6'],
                            data: [
                                {value: this.sexRatio[0], name: '男'},
                                {value: this.sexRatio[1], name: '女'},
                            ],
                            //animationEasing: 'cubicInOut',
                            animationDuration: 2600,

                        }
                    ]
                });
            },
            initLineEcharts(){
                // 实例化echarts对象
                let myChartDrawer = this.$echarts.init(document.getElementById('main4'))

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '评测预警趋势图',
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip: {              //设置tip提示
                        trigger: 'axis'
                    },

                    legend: {               //设置区分（哪条线属于什么）
                        data:['人数'],
                        x:'right',//x轴方向对齐方式
                        padding:[10,70,0,0]
                    },
                    color: ['#8AE09F'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                    xAxis: {                //设置x轴
                        type: 'category',
                        boundaryGap: false,     //坐标轴两边不留白
                        data: this.dateTime,
                        name: 'DATE',           //X轴 name
                        nameTextStyle: {        //坐标轴名称的文字样式
                            fontSize: 16,
                            padding: [0, 0, 0, 20]
                        },
                        axisLine: {             //坐标轴轴线相关设置。
                            lineStyle: {
                                //color: '#FA6F53',
                            }
                        }
                    },
                    yAxis: {
                        name: 'Num',
                        nameTextStyle: {
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                //color: '#FA6F53',
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name: '人数',
                            data:  this.trendData2,
                            type: 'line',               // 类型为折线图
                            lineStyle: {                // 线条样式 => 必须使用normal属性
                                normal: {
                                    color: '#8AE09F',
                                }
                            },
                        },
                    ]
                };

                myChartDrawer.setOption(option);
            },
        }
    }
</script>

<style scoped>
  .el-main {
    color: #333;
    /* text-align: center; */
    line-height: 20px !important;
  }
</style>
